import React, { Component } from 'react';
import './readCardful.css';

//仔细阅读(阅读理解)组件

class ReadCareful extends Component {
    

    constructor(props){
        super(props);
        
        this.state ={
            'show':'block',
            'arrow':'icon iconfont icon-shouqi',
            'initStyle' : this.getInitStyleList(),
        }

    }




    getLeft(){

        if(this.props.switch === 0){
            return 0+'px';
        }

        if(this.props.switch === 1){
            return (-this.props.width)+'px';
        }

    }

    controlDisplay(e){
        let state = this.state.show;

        if(state === 'block'){

            this.setState({
                'show':'none',
                'arrow':'icon iconfont icon-zhankai'
            });

            return;

        }


        this.setState({
            'show':'block',
            'arrow':'icon iconfont icon-shouqi'
        });


    }

    clickHander(e){
        return;
    }

    getInitStyleList(){
        let initList = {};
        let quesitonData = this.props.data.bind_question;

        quesitonData.map((value, index)=>{
            initList[value.id] = ''
        });

        return initList;
    }

    selectAnswer(e){
        let init = this.state.initStyle;
        let initKey = e.target.dataset.id;
        let initValue = e.target.innerHTML;
        
        init[initKey] = initValue;

        this.setState({
            initStyle:init
        });

        this.props.input(e)

    }

    renderLi(value){

        

        let selectionArray = [];
        for (let x in value.selection) {
            selectionArray.push([x, value.selection[x]])
        }

        let init = this.state.initStyle;


        return (
            <div>
                {
                    selectionArray.map((selection, index)=>{

                        let className = '';

                        if(selection[0] === init[value.id]){
                            className = 'my-radios-checked not-mark'
                        }else{
                            className='my-radios not-mark'
                        }

                        return (
                            <li key={index}>
                                <span data-id={value.id} data-value={selection[1]} onClick={(e)=>this.selectAnswer(e)} className={className}>{selection[0]}</span>
                                <div style={{display: 'inline'}} dangerouslySetInnerHTML={{__html:selection[1]}} ></div>
                            </li>
                        )
                    })
                }
            </div>
        )

    }


    render() {

        let left = this.getLeft();

        let bindQuetion = this.props.data.bind_question;


        return (
            <div style={{height:this.props.height}} className="question-view">
                <ul className="question-card-box" style={{width:this.props.width*2, left:left}}>
                    <li className="question-card" style={{width:this.props.width}}>
                        <div className="quesiton-wrapper">

                            <div style={{'display':this.state.show}} onClick={(e)=>this.clickHander(e)} className="setcion_explain" dangerouslySetInnerHTML={{ __html: this.props.data.section_explain }}></div>
                        
                            <div style={{'display':this.state.show}} onClick={(e)=>this.clickHander(e)} className="explain" dangerouslySetInnerHTML={{ __html: this.props.data.explain }}></div>

                            <div className="display-button">
                                    <i onClick={(e)=>this.controlDisplay(e)} className={this.state.arrow}></i>
                            </div>

                            <div onClick={(e)=>this.clickHander(e)} className="common_question" dangerouslySetInnerHTML={{__html: this.props.data.common_question}}></div>

                        </div> 
                    </li>

                    <li className="question-card" style={{width:this.props.width}}>
                        <div onClick={(e)=>this.props.mark(e)} className="quesiton-wrapper-2">
                        


                            {
                                bindQuetion.map((value, index)=>{
                                    return(
                                        <ul key={index} className="question-box">
                                            <div dangerouslySetInnerHTML={{__html:value.question}}></div>
                                            {this.renderLi(value)}
                                        </ul>
                                    )
                                })
                            }
                            
                             
                        </div>
                    </li>

                </ul> 
            </div>
        );
    }
}

export default ReadCareful;